<script lang="ts" setup>
	import {
		useRouter
	} from 'uni-mini-router'
	import { ref } from "vue";
	let router = useRouter()
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	if (!uni.$u.test.isEmpty(uni.getStorageSync('userInfo'))) {
		router.pushTab({
			name: 'index',
			params: {}
		})
	}
	const goLogin = (e, t) => {
		console.log(e, '选择后的输出');
		radiovalue1.value = t
		uni.setStorageSync('roleFlag', e)
		router.push({
			name: 'login',
			params: {}
		})
	}
	let radiolist1 = ref([{
		title: '美业求职者',
		desc: '4w+认证企业，求职更安心',
		logo: '../../static/images/worker.png',
		id: 0
	},
	{
		title: '美业招聘方',
		desc: '2亿+人才库，招人更高效',
		logo: '../../static/images/boss.png',
		id: 1
	},
	{
		title: '美业供应商',
		desc: '立刻拥有美业2亿+客户',
		logo: '../../static/images/gys.png',
		id: 2
	}
	])
	let radiovalue1 = ref('')
</script>
<template>
	<view class="title c-flex-start-start">
		<text>你的身份是？</text>
		<text>方便我们更准确的为您提供服务</text>
	</view>
	<view class="roleFather">
		<u-radio-group v-model="radiovalue1" placement="column">
			<view :class="radiovalue1==item.title?'role active r-flex-end-end':'role r-flex-end-end'"
				@click="goLogin(item.id,item.title)" v-for="(item, index) in radiolist1" :key="index">

				<view class="rCon r-flex-start-start">
					<u-radio :customStyle="{marginBottom: '8px'}" :name="item.title" activeColor="#CB645E">
					</u-radio>
					<view class="rCon c-flex-start-start">
						<text>{{ item.title }}</text>
						<text>{{ item.desc }}</text>
					</view>
				</view>
				<image class="rImg" :src="item.logo" mode=""></image>
			</view>
		</u-radio-group>
	</view>
</template>
<style lang="scss">
	.title {
		background-image: url('../../static/images/pink.png');
		background-size: 100% 100%;
		width: calc(100% - 68rpx);
		height: 672rpx;
		font-size: 40rpx;
		padding: 0 64rpx;

		text:nth-child(1) {
			font-size: 56rpx;
			font-weight: 500;
			color: #000000;
			margin-top: 292rpx;
			margin-bottom: 20rpx;
		}

		text:nth-child(2) {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}
	}

	.active {
		background: linear-gradient(165deg, #FFFFFF 0%, #FFFFFF 100%) !important;
		border: 3rpx solid #CB645E !important;
	}

	.roleFather {
		margin-top: -240rpx;
	}

	.role {
		width: 686rpx;
		height: 184rpx;
		margin: 50rpx auto;
		font-size: 26rpx;
		background: linear-gradient(165deg, #FFFFFF 0%, #FFFFFF 100%);
		border-radius: 16rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.1);

		.rCon {
			margin-bottom: 22rpx;
			margin-top: 8rpx;

			text:nth-child(1) {
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
			}

			text:nth-child(2) {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
				margin-top: 10rpx;
			}
		}

		.rImg {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			margin-left: 100rpx;
		}
	}
</style>